﻿<div id="container">
    <div id="header">
        <div id="mainPageLogoDiv"></div>

        <nav class="navigation-bar">
            <div class="navigation-bar-content">
                <div class="no-tablet-portrait">
                    <span class="element-divider"></span>
                    <div class="element place-right">
                        <a class="dropdown-toggle" href="#">
                            <span class="icon-cog"></span>
                        </a>
                        <ul class="dropdown-menu place-right" data-role="dropdown">
                            <li><a href="#" onclick="editUserAccount();">Parametres de compte</a></li>
                            <li><a href="#">Aides</a></li>
                            <li><a href="/logOut">Deconnecter</a></li>
                        </ul>
                    </div>
                    <span class="element-divider place-right"></span>
                    <button class="element image-button image-left place-left">
                        <div> Bienvenu <strong id="currentUserName" ng-bind="currentUser.firstname"></strong> </div>
                        <img src="UI/metroUI/docs/images/eleve.jpg" />
                    </button>
                </div>
            </div>
        </nav>

        <h2 id="appTitle">Gestion d´etablissement scolaire</h2>
    </div>

    <div id="leftRegion">
        <div id="leftRegionHeader">
            <p id="overview">Overview </p> <i id="iconCloseLeftRegion" onclick="resizeLeftSideBar()" class="iconCloseLayout icon-arrow-left-3"></i>
        </div>
        <div id="accordion" class="accordion" data-role="accordion">
            <div class="accordion-frame">
                <a href="#" onclick="initPersonalPage()" class="heading bg-teal fg-white collapsed">Personel enseignant</a>
                <div class="content accordionContent">
                    <ul class="treeview" data-role="treeview">
                        <li class="node collapsed" ng-repeat="item in treeViewList">
                            <a href="#" id="{{item.id}}" onclick="getPersonalByClassGroup(this)"><span class="node-toggle"></span>{{item.name}}</a>
                            <ul>
                                <li ng-repeat="class in item.classRoom"><a href="#" id="{{class.id}}" onclick="getPersonalByClass(this)">{{class.name}}</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="accordion-frame">
                <a href="#" onclick="initStudentPage()" class="heading bg-orange fg-white collapsed">Eleves</a>
                <div class="content accordionContent">
                    <ul class="treeview" data-role="treeview">
                        <li class="node collapsed" ng-repeat="item in treeViewList">
                            <a href="#" id="{{item.id}}" onclick="getStudentsByClassGroup(this)"><span class="node-toggle"></span>{{item.name}}</a>
                            <ul>
                                <li ng-repeat="class in item.classRoom"><a href="#" id="{{class.id}}" onclick="getStudentsByClass(this)">{{class.name}}</a></li>
                            </ul>

                        </li>
                    </ul>
                </div>
            </div>

            <div class="accordion-frame">
                <a href="#" onclick="initInfrastructurPage()" class="heading bg-lightBlue fg-white collapsed">Materiel et infrastructure</a>
                <div class="content">
                    Hello Every One in section 2
                </div>
            </div>
        </div>
    </div>

    <div id="centerRegion">
        <header id="headerModus">
            <div id="selectedModusIcon" class="bg-teal"></div>
            <div id="selectedModusTitle">Gestion du personel</div>
        </header>
        <div id="menuModus">          
            
            <div class="input-control text menuModusFilterInput">
                <input id="filterList" ng-model="filterListItem" type="text" placeholder="Entrez votre mot de recherche">
                <button class="btn-search"></button>
            </div>

        </div>

        <div id="mainPageWrapper">
            <div id="mainPageContainer">

                <div ng-repeat="employee in employeeList | filter:filterListItem | orderBy:'lastName'" class="employeeLeft employee">
                    <div class="employeeLogo">
                        <img class="employeeFoto icon" src="../UI/metroUI/docs/images/defaultUserIcon.png"><br />
                        <div class="icon-phone"> <span class="employeePhoneNumber">{{employee.cellPhone}}</span></div><br />
                    </div>
                    <div class="employeeData">
                        <div class="employeeName">{{employee.lastname}} {{employee.firstname}}</div>
                        <div class="employeeWork">{{employee.profession}}</div>
                        <div class="employeeMatricul">Nr. de Matricule: <strong>{{employee.matriculationNumber}}</strong></div>
                        <div class="employeeMoreInfos">
                            <div class="icon-mail"><span class="employeeEmail">{{employee.email}}</span></div><br />
                            <div class="icon-home">
                                <span class="employeeStreetNr"> {{employee.street}}</span>
                                <span class="employeeZipCode"> {{employee.zipCode}}</span>
                                <span class="employeeCountry"> {{employee.city}}</span>
                            </div><br />
                            <div class="icon-smiley"> Née le <span class="employeeBirthday"> {{employee.birthday}}</span></div><br />
                            <div class="icon-mobile-2"> <span class="employeeWorkPhone"> {{employee.workPhone}}</span></div><br />
                        </div>
                        <div class="employeeEditInfos">Modifier les données 
                            <span class="icon-tools" id="{{employee.id}}" onclick="editEmployee(employee)"></span>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <div id="rightRegion">
        <i id="iconCloseRightRegion" onclick="resizeRightSideBar()" class="iconCloseLayout icon-arrow-right-3"></i>
        <div id="options">Options</div>
        <div id="optionList">
            <!--Personal-->
            <div class="icon-user-3 optionItem optionPersonal" > 
                <span id="optionAddNewEmployee" ng-click="goToAddEmployeePage()">Ajouter un nouvel employé</span>
            </div><br />
            <div class="icon-calendar optionItem optionPersonal"> 
                <span id="optionEmployeePlanning">Emploie du temps employé</span>
            </div><br />
            <div class='icon-calendar optionItem optionPersonal'> 
                <span id='optionStudentNotes'>Enregistre les notes des Éleves</span>
            </div>
        </div>

        
        <div id="notificationList">
            <button class="fluent-button btnNewNotification"><span class="icon-book on-left"></span>Nouvelle notification</button>

        </div>

    </div>

    <div id="footer">
        <p>Footer</p>
    </div>
</div>
